<script lang="jsx">
import { userServer, updateStatusUser } from '@/api'
import CRUD from '@/components/CRUD/index.vue'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus' // 引入 ElMessageBox
import RoleSelect from '@/views/Role/components/RoleSelect.vue' // 引入角色选择组件

export default {
  components: {
    CRUD,
  },
  props: {
    deptId: { type: Number, default: '' }, // 接收 deptId 属性
    deptName: String
  },
  setup(props) {
    const columns = [
      { label: '序号', prop: 'user_id' },
      { label: '姓名', prop: 'name' },
      { label: '账号', prop: 'username' },
      { label: '角色', prop: 'role_name' },
      { label: '状态', prop: 'is_closed', render: (row) => <el-tag type={row.is_closed ? 'danger' : 'success'}>{row.is_closed ? '已停用' : '正常'}</el-tag> },
    ]
    const filters = [
      {
        key: 'keyword',
        type: 'custom',
        render: () => <strong class="!w-auto">{props.deptName}人员</strong>,
      },
      {
        key: 'keyword',
        type: 'input',
        props: { placeholder: '搜索用户名' },
      },
      {
        key: 'department_id',
        value: props.deptId,
      },
    ]
    const createForm = [
      {
        label: '姓名',
        key: 'name',
        type: 'input',
        required: true,
        props: { placeholder: '请输入姓名' },
      },
      {
        label: '电话',
        key: 'mobile',
        type: 'input',
        required: true,
        props: { placeholder: '请输入电话' },
      },
      {
        label: '账号',
        key: 'username',
        type: 'input',
        required: true,
        props: { placeholder: '请输入账号' },
      },
      {
        label: '密码',
        key: 'password',
        type: 'input',
        required: true,
        rules: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
        ],
        props: {
          type: 'password',
          showPassword: true,
          placeholder: '请输入密码'
        },
      },
      {
        label: '角色',
        key: 'role_id',
        type: 'custom',
        required: true,
        props: { placeholder: '请输入角色' },
        render: RoleSelect,
      },
      {
        label: '市场主管权限',
        key: 'is_market_manager',
        type: 'switch',
      },
      {
        label: '跟案主管权限',
        key: 'is_arrears_manager',
        type: 'switch',
      },
      {
        label: '开庭主管权限',
        key: 'is_litigation_manager',
        type: 'switch',
      },
    ]
    const editForm = [
      {
        label: '姓名',
        key: 'name',
        type: 'input',
        required: true,
        props: { placeholder: '请输入姓名' },
      },
      {
        label: '电话',
        key: 'mobile',
        type: 'input',
        required: true,
        props: { placeholder: '请输入电话' },
      },
      {
        label: '账号',
        key: 'username',
        type: 'input',
        required: true,
        props: { placeholder: '请输入账号' },
      },
      {
        label: '密码',
        key: 'password',
        type: 'input',
        required: true,
        rules: [
          { required: false, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
        ],
        props: {
          type: 'password',
          showPassword: true,
          placeholder: '请输入密码'
        },
      },
      {
        label: '角色',
        key: 'role_id',
        type: 'custom',
        required: true,
        props: { placeholder: '请输入角色' },
        render: RoleSelect,
      },
      {
        label: '市场主管权限',
        key: 'is_market_manager',
        type: 'switch',
      },
      {
        label: '跟案主管权限',
        key: 'is_arrears_manager',
        type: 'switch',
      },
      {
        label: '开庭主管权限',
        key: 'is_litigation_manager',
        type: 'switch',
      },
    ]

    const crudRef = ref()
    const handleDisable = async (row) => {
      const msg = row.is_closed ? '确定要启用该用户吗？' : '确定要停用该用户吗？'
      await ElMessageBox.confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      await updateStatusUser({ user_id: row.user_id });
      ElMessage.success(
        row.is_closed ? '启用成功' : '停用成功'
      )
      crudRef?.value.getTableData(true);
    }

    const beforeSubmit = (params) => {
      params.department_id = props.deptId
      return params
    }

    return () => (
      <CRUD
        ref={crudRef}
        title="用户"
        rawKey="user_id"
        server={userServer}
        columns={columns}
        filters={filters}
        createForm={createForm}
        editForm={editForm}
        deleteable={false}
        beforeSubmit={beforeSubmit}
        fixedColWidth="220px"
        v-slots={{
          handler: ({ row }) => (
            <>
              <el-button type="primary" link onClick={() => handleDisable(row)}>
                {row.is_closed ? '启用' : '停用'}
              </el-button>
            </>
          ),
        }}
      ></CRUD>
    )
  },
}
</script>
